<script lang="ts" setup>
import { ref } from "vue";

const popup_services = ref();
interface IservicesData {
    t: string
    c: string
}

const servicesData = ref<IservicesData[]>([
    {
        t: '保密配送',
        c: '快递严密包裹，保密邮寄，快递单统一注明为【礼品】，我们为您的隐私保驾护航'
    },
    {
        t: '7天退换货',
        c: '商品质量问题可退换货（需满足退换货标准），可通过包裹中售后卡联系客服处理；非质量问题，拆封后不可享'
    },
    {
        t: '顺丰优选',
        c: '满158元首选顺丰，顺丰不到的地区根据实际情况选择其他适合的快递公司'
    },
    {
        t: '货到付款',
        c: '支持货到付款，先验货再付款，安全有保障'
    },
    {
        t: '正品保障',
        c: '在桃奢商城出售的商品均接受国家质量监督检验中心的检测，质量享有充分的保障'
    }
]
);



const open = () => {
    popup_services && popup_services.value.open();
};
</script>

<template>
    <view class="app-container">
        <uv-cell :border="false" @click="open" icon="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/shop/icon_security.png" :isLink="true" title="保密配送·7天退换货·顺丰优送"></uv-cell>
        <uv-popup closeable ref="popup_services" mode="bottom"  round="20px">
            <view class="content">
                <view class="title font16333">服务保障</view>
                <view v-for="(item, index) in servicesData "  :key="index" class="servicesData">
                    <uv-image class="img" src="https://wealth-1311286543.cos.ap-guangzhou.myqcloud.com/taoshe/static/shop/Group_f.png" width="20px" height="20px"></uv-image>
                    <view class="item">
                        <view class="item-title font14333">{{ item.t }}</view>
                        <view class="item-content font14999">{{ item.c }}</view>
                    </view>
                </view>
            </view>
        </uv-popup>

    </view>
</template>

<style lang="scss" scoped>
:deep(.uv-cell__title-text) {
    font-size: 24rpx;
}

:deep(.uv-cell__body) {
    padding: 10px 4%;
}

.content {
    padding: 20px 4%;
    padding-bottom: 40px;

    .servicesData {
        display: flex;
    }
    .item {
        margin-left: 10px;
    }
    .title {
        padding-bottom: 20px;
    }
    .item-title {
        line-height: 36rpx;
    }
    .item-content {
        padding: 8px 0 10px 0;
        line-height: 40rpx;
    }

}
</style>
